/**@type {HTMLTextAreaElement} */
let inputText;
let uuid;
/**@type {HTMLDivElement} */
let msgContent;

function onLoad() {
    inputText = document.getElementById("inputText");
    msgContent = document.getElementById('msgContent');

    onMessage("connection", function (success, data) {
        if (success) {
            uuid = data.uuid;
            console.log("connect success", uuid);
        } else {
            console.log("connect fail");
        }
    });

    onMessage("syncMsgNTF", function (success, data) {
        msgContent.innerHTML = "";
        data.items.forEach(e => {
            const item = document.createElement("div");
            item.className = "msgItem";
            msgContent.appendChild(item);

            const content = document.createElement("div");
            content.className = "msgItemContent";
            content.innerHTML = e.text;
            item.appendChild(content);

            const bottom = document.createElement("div");
            bottom.className = "msgItemBottom";
            item.appendChild(bottom);

            const ip = document.createElement("span");
            ip.className = "msgItemIp";
            bottom.appendChild(ip);
            ip.innerHTML = e.ip;

            const time = document.createElement("span");
            time.className = "msgItemTime";
            bottom.appendChild(time);
            time.innerHTML = e.time;
        });
    });
}

function onClickSend() {
    const text = inputText.value;
    if (!text) {
        return;
    }
    sendMsg("sendMsgReq", {
        text
    });
    inputText.value = "";
}

function onClickClearMsg() {
    sendMsg("clearMsgReq", {});
}